<template>
  <div class="wrap" >
    <headerPrint type="FAT"/>
    <div  class="print-wrap"  id="printWrapId">
        <p class="ft">KONE Corporation All right reserved 版权所有<span>SOCF-MSD-46/A</span></p>
        <div class="print">
            <div class="header">
                <img class="logo" src="~images/icon.jpg" alt="">
                <div class="title-wrap">
                    <p class="name">终验收报告</p>
                    <p class="name-en" style="margin-left: 0!important;">Final-Acceptance Test</p>
                </div>
            </div>
            <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <td colspan="12">
                        <p class="text-en">Distribution:</p>
                        <p class="text">分发 &nbsp;&nbsp;{{ fatInfo.distribution }}</p>
                    </td>
                    <td colspan="12">
                        <p class="text-en">No.</p>
                        <p class="text">编号 &nbsp;&nbsp;{{ fatInfo.atNo }}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="12">
                        <p class="text-en">KONE-Contract No. </p>
                        <p class="text">KONE合同号 &nbsp;&nbsp;{{ fatInfo.csoffContractNo }}</p>
                    </td>
                    <td colspan="12">
                        <p class="text-en">Machine No.</p>
                        <p class="text">设备编号 &nbsp;&nbsp;{{ fatInfo.machineNo }}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24" class="h180">
                        <p class="text-en">Description of Line or Equipment:</p>
                        <p class="text">设备概述 &nbsp;&nbsp;</p>
                        <p  class="descText" v-html="fatInfo.descriptionOfMe"></p>
                    </td>
                </tr>

                <tr>
                    <td colspan="8">
                        <p class="text-en">Product:</p>
                        <p class="text">产品:{{ fatInfo.product }} </p>
                    </td>
                    <td colspan="8" class="">
                        <p class="text-en">Operation No.:</p>
                        <p class="text">工序号 &nbsp;&nbsp;{{ fatInfo.operationNo }}</p>
                    </td>
                    <td colspan="8" class="">
                        <p class="text-en">Date of acceptance:</p>
                        <p class="text">验收日期: &nbsp;&nbsp;{{ $moment(fatInfo.atTime).format('YYYY-MM-DD') }}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24">
                        <p class="text-en">KONE-Participants:</p>
                        <p class="text">KONE-参加人员 &nbsp;&nbsp;{{ fatInfo.participantNames }}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="24">
                        <p class="text-en">Supplier's participants:</p>
                        <p class="text">供应商参加人员 &nbsp;&nbsp;{{ fatInfo.suppliersParticipants }}</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="18">
                        <p class="text">
                            The acceptance inspection covered the following fields:<br/>
                            本次验收检查包括以下范围
                        </p>
                        <p class="text">
                            1.Function and execution of the machine or equipment according to quotation and contract<br/>
                            报价及合同要求的设备功能和参数
                        </p>
                        <p class="text">
                            2.Electricl pneumatic and hydraulically installation in according with regulations<br/>
                            电气动和液压装置符合有关规范
                        </p>
                        <p class="text">
                            3.Process quality or accuracy<br/>
                            工序质量或精度
                        </p>
                        <p class="text">
                            4.Machine capability and utilization<br/>
                            设备能力及利用率
                        </p>
                    </td>
                    <td colspan="2">
                        <p class="text hl2">合格</p>
                        <div class="hl2">{{ getResultStr(fatInfo.functionExecution, 'OK') }}</div>
                        <div class="hl2">{{ getResultStr(fatInfo.electriclHydraulic, 'OK') }}</div>
                        <div class="hl1">{{ getResultStr(fatInfo.qualityAccuracy, 'OK') }}</div>
                        <div class="hl1">{{ getResultStr(fatInfo.machineUtilization, 'OK') }}</div>
                    </td>
                    <td colspan="2 ">
                        <p class="text hl2">不合格</p>
                        <div class="hl2">{{ getResultStr(fatInfo.functionExecution, 'NG') }}</div>
                        <div class="hl2">{{ getResultStr(fatInfo.electriclHydraulic, 'NG') }}</div>
                        <div class="hl1">{{ getResultStr(fatInfo.qualityAccuracy, 'NG') }}</div>
                        <div class="hl1">{{ getResultStr(fatInfo.machineUtilization, 'NG') }}</div>
                    </td>
                    <td colspan="2">
                        <p class="text hl2">无关</p>
                        <div class="hl2">{{ getResultStr(fatInfo.functionExecution, 'N/A') }}</div>
                        <div class="hl2">{{ getResultStr(fatInfo.electriclHydraulic, 'N/A') }}</div>
                        <div class="hl1">{{ getResultStr(fatInfo.qualityAccuracy, 'N/A') }}</div>
                        <div class="hl1">{{ getResultStr(fatInfo.machineUtilization, 'N/A') }}</div>
                    </td>
                </tr>

                <tr>
                    <td colspan="24">
                        <p class="text">
              <span class="radio"
                    :class="{selectActive:isActiveCurrent(fatInfo.atResult,'The machine or equipment is accepted by KONE')}"></span>The
                            machine or equipment is accepted by KONE<br/>
                            设备通过KONE验收<br/>
                            <span class="radio"
                                  :class="{selectActive:isActiveCurrent(fatInfo.atResult,'The machine or equipment is conditionally accepted by KONE')}"></span>The
                            machine or equipment is conditionally accepted by KONE<br/>
                            设备有条件通过KONE验收<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="radio"
                                                                :class="{selectActive:isActiveCurrent(fatInfo.atResult,'有一些小问题，供货商必须整改或更换零部件，在右述日期前：')}"></span>有一些小问题，供货商必须整改或更换零部件，在右述日期前：<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="radio"
                                                                :class="{selectActive:isActiveCurrent(fatInfo.atResult,'KONE认为不需要再作进一步验收或检查')}"></span>KONE认为不需要再作进一步验收或检查<br/>
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="radio"
                                                                :class="{selectActive:isActiveCurrent(fatInfo.atResult,'全部技术方面的细节和结果可参见验收报告。日期为：')}"></span>全部技术方面的细节和结果可参见验收报告。日期为：
                        </p>
                    </td>
                </tr>
                <tr class="borderNone">
                    <td colspan="12">
                        <p class="text underline t-c">通力电梯有限公司</p>
                    </td>
                    <td colspan="12">
                        <p class="text underline  t-c">Supplier供货商</p>
                    </td>
                </tr>
                <tr class="borderNone">
                    <td colspan="3" style="height: 150px;">
                        <p class="text-en">Dept.:</p>
                        <p class="text">部门</p>
                        <p>{{info.orgName}}</p>
                    </td>
                    <td colspan="3">
                        <p class="text-en">Date:</p>
                        <p class="text">日期</p>
                        <p>{{$moment(fatInfo.atTime).format('YYYY-MM-DD')}}</p>
                    </td>
                    <td colspan="6">
                        <p class="text-en">Signature:</p>
                        <p class="text">签名</p>
                        <div class="signPathWrap">
<!--                            <img v-for="(item,index) in userList" :src="util.filePathToUrl(item.signPath)" alt="" :key="index">-->
                            <approvalSingleUser v-for="(item,index) in info.fatApprovals" :key="index" :list="info.fatApprovals" :progressCode="item.progressCode"></approvalSingleUser>
                        </div>
                    </td>
                    <td colspan="3">
                        <p class="text-en">Dept.:</p>
                        <p class="text">部门</p>
                    </td>
                    <td colspan="3">
                        <p class="text-en">Date:</p>
                        <p class="text">日期</p>
                    </td>
                    <td colspan="6">
                        <p class="text-en">Signature:</p>
                        <p class="text">签名</p>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="print">
            <div class="header">

                <img class="logo" src="~images/icon.jpg" alt="">
                <div class="title-wrap">
                    <p class="name">终验收报告</p>
                    <p class="name-en" style="margin-left: 0!important;">Final-Acceptance Test</p>
                </div>
            </div>
            <table border="1" width="100%" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td colspan="24">
                        <p class="text-en">Appendix of acceptance document</p>
                        <p class="text">验收报告附录</p>
                    </td>
                </tr>
                <tr class="nowrap">
                    <td colspan="2">
                        <p class="text-en">Type</p>
                        <p class="text">类别</p>
                    </td>
                    <td colspan="6">
                        <p class="text-en" style="font-weight: 600;">Demands</p>
                        <p class="text">要求</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">Verify</p>
                        <p class="text">验证</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">Result</p>
                        <p class="text">结果(Pass/No)</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">Who</p>
                        <p class="text">负责人</p>
                    </td>
                    <td colspan="4">
                        <p class="text-en" style="font-weight: 600;">When</p>
                        <p class="text">完成日期</p>
                    </td>
                </tr>
                <tr v-for="(item,index) in fatDetailDtos" :key="index" class="breakWord">
                    <td colspan="2">
                        <p class="text">{{ item.type }}</p>
                    </td>
                    <td colspan="6">
                        <p class="text">{{ item.demands }}</p>
                    </td>
                    <td colspan="4">
                        <p class="text">{{ item.verify }}</p>
                    </td>
                    <td colspan="4">
                        <p class="text">{{ item.result }}</p>
                    </td>
                    <td colspan="4">
                        <p class="text">{{ item.who }}</p>
                    </td>
                    <td colspan="4">
                        <p class="text">{{$moment(item.whenTime).format('YYYY-MM-DD')}}</p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
  </div>
</template>


<script>
import headerPrint from './header'
import mixins from "@/views/devBasic/capex/print/mixins";
import approvalSingleUser from "@/views/devBasic/capex/print/approvalSingleUser.vue";
export default {
  name: "fat",
  mixins:[mixins],
  components: {headerPrint,approvalSingleUser},
  data() {
    return {
      info: this.$store.state.capex['FAT'+this.$route.query.id],
      fatInfo: {},
      flows: {},
      fatDetailDtos: {},
      userList:[]
    }
  },
  async mounted() {
    this.fatInfo = this.info.fatInfo
    this.fatDetailDtos = this.info.fatDetailDtos
    // const userList  = await this.getApproval(this.info.id,['FAT'])
    // if (Array.isArray(userList) && userList.length > 0)
    //   this.userList = userList[0].userModelList || []
  },
  methods: {
    isActiveCurrent(str1, str2) {
      return str1 == str2
    },
    getResultStr(str1, str2) {
      if (str1 == str2) {
        return "✓"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
.print{
  padding: 55px;
}
.hl2 {
  height: 52px;
  line-height: 52px;
  width: 100%;
  text-align: center;
}

.hl1 {
  height: 26px;
  line-height: 26px;
  width: 100%;
  text-align: center;
}
</style>
